<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>Title</title>
</head>
<body>

<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label">公告标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">公告内容</label>
        <div class="layui-input-block" >
            <textarea name="content" id="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add1">发布公告</button>
            <!--暂时没找到清空富文本输入框的办法，暂时取消该按钮-->
            <!--<button id="resetbtn" type="reset" class="layui-btn layui-btn-primary">重置</button>-->
        </div>
    </div>
</form>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="show">查看详细公告</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.js"></script>
<script>
    layui.use(['jquery','layer', 'form','element','table','layedit'], function() {
        var layer = layui.layer,
            element = layui.element,
            form = layui.form,
            table = layui.table,
            layedit=layui.layedit,
            $ = layui.jquery;
        var tableIns=table.render({
            elem: '#demo',
            url: 'http://localhost:8080/announ/find',
            page: false,

            cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left',width:30}
                , {field: 'title', title: '公告标题'}
                , {field: 'content', title: '公告内容'}
                , {
                    field: 'starttime', width:200,title: '公告发布时间', sort: true, templet: function (data) {
                        //return new Date(data).getDate();;
                        //console.log(data);
                        var time = new Date(data.starttime);
                        var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
                        var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
                        var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
                        var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
                        var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
                        var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
                        return y + '年' + M + '月' + d + "日   " + h + ':' + m + ':' + s;
                   }
                }
                ,{toolbar: '#toolbarDemo',title: '操作',width:250}
            ]]
        });
        //监听行内点击事件，添加放到最外边，使用富文本编辑器
        table.on('tool(test)',
            function (obj) {
                let data = obj.data; //获得当前行数据
                let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'show'){ //查看详情
                    //弹出模态框
                    //console.log(tr);
                    //console.log(data);
                    layer.open({
                        title:'公告的详细内容',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['800px', '350px'], //宽高
                        content:data.content
                    });
                } else if(layEvent === 'delete'){ //删除
                    layer.confirm('真的删除吗', function(index){

                        layer.close(index);
                        let id=data.id;
                       // console.log(data.id);
                       //特别注意:这个index不是表格中对应的id!!!
                        //向服务端发送删除指令
                        $.ajax({
                            //http://localhost:8080/announ/delete?id=4
                            url:"http://localhost:8080/announ/delete",
                            data:{id:id},
                            type:"post",
                            dataType:"json",
                            success:function(data){
                                if(data===1)
                                {
                                    layer.msg("删除成功");
                                    obj.del(index); //删除对应行（tr）的DOM结构，并更新缓存
                                }
                                else
                                {
                                    layer.msg("删除失败");
                                }

                                //layer.msg(data.toString());
                            },
                            error:function(data){
                                layer.msg("删除失败");
                            }
                        });

                    });
                } else if(layEvent === 'update'){ //编辑
                    //弹出模态框
                    layer.prompt({
                        formType: 2,
                        value: data.content,
                        title: '修改新闻内容',
                        area: ['800px', '350px'] //自定义文本域宽高
                    }, function(value, index, elem){
                        //value就是修改后的值
                        $.ajax({
                            url:"http://localhost:8080/announ/set",
                            data:{id:data.id,
                                content:value},
                            type:"post",
                            dataType:"json",
                            success:function(data){
                                if(data===1)
                                {
                                    layer.msg("修改成功");
                                    //在此刷新表格数据
                                    obj.update({
                                        content:value
                                    });
                                }
                                else
                                {
                                    layer.msg("修改失败");
                                }

                                //layer.msg(data.toString());
                            },
                            error:function(data){
                                layer.msg("修改失败");
                            }
                        });

                        layer.close(index);
                    });


                } /*else if(layEvent === 'LAYTABLE_TIPS'){
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }*/

        });
        //layedit.build('content');
        var editNum=layedit.build('content', {
            height: 180 //设置编辑器高度
        });
        //添加公告
       /* $("#btn").click(function () {
            var content=layedit.getText(editNum);
            console.log(content);
        });*/

       //清空输入的按钮
        /*$("#resetbtn").click(function () {
            layer.confirm('确定清空', {
                btn: ['清空','撤销'] //按钮
            }, function(){
                //清空


            }, function(){
                //撤销 什么都不做
            });

        });*/
        form.on('submit(add1)',function (data) {


        //发布成功之后还需要重新渲染表格数据
           data=data.field;
            //console.log(data);
            //title和content
            console.log(data.content.toString());
            if(data.title==='')
            {
                layer.msg("标题不能为空");
                return false;
            }
            //不应该使用getText方法，该方法获取的是纯文本!!
            //var content=layedit.getText(editNum);
            var content=layedit.getContent(editNum);
            console.log(content);


            //提交给服务器
            $.ajax({
                //http://localhost:8080/announ/add?title=?&content=?
                url:"http://localhost:8080/announ/add",
                data:{title:data.title,
                content:content},
                type:"post",
                dataType:"json",
                success:function(data){
                    if(data===1)
                    {
                        layer.msg("发布成功");
                        //在此刷新表格数据
                        tableIns.reload();

                    }
                    else
                    {
                        layer.msg("发布失败");
                    }


                    //layer.msg(data.toString());
                },
                error:function(data){
                    layer.msg("发布失败");
                }
            });

            return false;
        })


    });


</script>
</body>
</html>